<!--  -->
<template>
  <el-card shadow="hover" class="sales_view">
    <template slot="header">
      <div class="menu_wrapper">
        <el-menu mode="horizontal" :default-active="activeIndex">
          <el-menu-item index="1">销售额</el-menu-item>
          <el-menu-item index="2">访问量</el-menu-item>
        </el-menu>
        <div class="menu_right">
          <div class="right_item">
            <el-radio-group v-model="radio" size="small">
              <el-radio-button label="今日"></el-radio-button>
              <el-radio-button label="本周"></el-radio-button>
              <el-radio-button label="本月"></el-radio-button>
              <el-radio-button label="今年"></el-radio-button>
            </el-radio-group>
          </div>
          <div class="right_item">
             <el-date-picker
              v-model="value"
              type="daterange"
              size="small"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </div>
      </div>
    </template>
    <template>
      <div class="sales_view_chart_wrapper">
        <v-chart :option="salesOption"></v-chart>
        <div class="sales_view_sort">
          <div class="sales_view_title">排行榜</div>
          <div class="sales_view_list">
            <div class="list_item" v-for="item in salesSortData" :key="item.nu">
              <div class="list_item_left">
                <div :class="['list_item_nu',item.nu < 4 ? 'top_num' : '']">{{item.nu}}</div>
                <div class="list_item_name">{{item.name}}</div>
              </div>
              <div class="list_item_count">{{item.count}}</div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </el-card>
</template>

<script>
export default {
  data () {
    return {
      activeIndex:"1",
      radio:"今日",
      value:"",
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            debugger
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      salesOption:{
        title:{
          text:"年度销售额",
          textStyle:{
            fontSize:14,
            color:"#666"
          },
          left:20
        },
        grid:{
          left:50,
          right:50,
          bottom:50
        },
        xAxis:{
          type:"category",
          data:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
          boundaryGap:true,
          axisTick:{
            alignWithLabel:true,
            lineStyle:{
              color:"#999"
            }
          },
          axisLine:{
            lineStyle:{
              color:"#999"
            }
          },
          axisLabel:{
            color:"#333"
          },
          axisPointer:{
            show:true,
            lineStyle:{
              color:"#eee"
            }
          }
        },
        yAxis:{
          splitLine:{
            lineStyle:{
              color:"#eee",
              type:"dashed"
            }
          }
        },
        series:[{
          type:"bar",
          data:[100,90,80,70,60,50,55,78,30,10,20,40],
          barWidth:"30%",
          color:"#3398db"
        }]
      },
      salesSortData:[{
        nu:1,
        name:"肯德基1",
        count:"213"
      },{
        nu:2,
        name:"肯德基2",
        count:"2132"
      },{
        nu:3,
        name:"肯德基3",
        count:"2213"
      },{
        nu:4,
        name:"肯德基4",
        count:"27213"
      },{
        nu:5,
        name:"肯德基",
        count:"29213"
      },{
        nu:6,
        name:"肯德基6",
        count:"213"
      },{
        nu:7,
        name:"肯德基7",
        count:"213"
      }]
    }
  },
}

</script>

<style lang='less' scoped>
.sales_view{
  margin-top: 20px;
  .menu_wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    .menu_right{
      display: flex;
      .right_item{
        margin-right: 14px;
      }
    }
  }
  .sales_view_chart_wrapper{
    height: 270px;
    display: flex;
    .echarts{
      flex: 0 0 70%;
      width: 70%;
      height: 270px;
    }
    .sales_view_sort{
      flex:1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      overflow: hidden;
      .sales_view_title{
        font-size: 14px;
        color: #000;
        font-weight: 500;
      }
      .list_item{
        display: flex;
        justify-content: space-between;
        height: 34px;
        align-items: center;  
        font-size: 12px;
        .list_item_left{
          display: flex;
          align-items: center;
          .list_item_nu{
           width: 20px;
           height: 20px;
           line-height: 20px;
           text-align: center;
           &.top_num{
            background: #000;
            color:#fff;
            border-radius: 50%;
           }
          }
          .list_item_name{
            height: 24px;
            line-height: 24px;
            margin-left: 12px;
          }
        }
      }
    }
  }
}
</style>